/*
 * @Author: jiangxin
 * @Date: 2022-11-23 15:39:39
 * @Company: orientsec.com.cn
 * @Description:
 */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

class HtmlScriptPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
      console.log("The compiler is starting a new compilation...");

      // Static Plugin interface |compilation |HOOK NAME | register listener
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        "MyPlugin", // <-- Set a meaningful name here for stacktraces
        (data, cb) => {
          console.log("data", data);
          // Tell webpack to move on
          const _data = this.#createDom(data.html);
          data.html = _data;
          cb(null, data);
        }
      );
    });
  }

  #createDom(data) {
    const dom = new JSDOM(data);
    const {
      window: { document }
    } = dom;

    // 插入自定义组件
    const envswitchbutton = document.createElement("env-switch-button");
    const _script = document.createElement("script");
    _script.setAttribute("defer", "defer"),
      _script.setAttribute("type", "text/javascript");
    _script.setAttribute(
      "src",
      "https://unpkg.com/switchservice@0.0.1/dist/switchservice.min.js"
    );
    const _createSelectScript = document.createElement("script");
    _createSelectScript.setAttribute("type", "text/javascript");
    _createSelectScript.textContent = `
        (function(){
            setTimeout(() => {
                const sl = document.createElement("select");
                console.log("window.DEVCONFIG", window.DEVCONFIG);
                const options = Object.keys(window.DEVCONFIG).map((item) => {
                  const currentenv = localStorage.getItem("SERVICEENV");
                  const o = document.createElement("option");
                  if (item === currentenv) {
                    o.setAttribute("selected", "selected");
                  }
                  o.setAttribute("value", item);
                  o.textContent = item;
                  return o;
                });
                options.forEach((item) => {
                  sl.appendChild(item);
                });
                sl.addEventListener("change", (e) => {
                  console.log("切换", e.target.value);
                  localStorage.setItem("SERVICEENV", e.target.value);
                  var r = confirm(
                    "已切换至：" + e.target.value + "，将要进行页面刷新"
                  );
                  if (r == true) {
                    location.reload();
                  } else {
                    location.reload();
                  }
                });
                document
                  .querySelector("env-switch-button")
                  .shadowRoot.appendChild(sl);
              }, 500);
        })()
    `;
    document.body.prepend(envswitchbutton);
    document.body.appendChild(_script);
    document.body.appendChild(_createSelectScript);
    return document.documentElement.outerHTML;
  }
}

module.exports = HtmlScriptPlugin;

